<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta charset="UTF-8">
        <title>排行榜介绍页</title>
        <link rel="shortcut icon" href="images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="<c:url value="/bootstrap-3.3.5-dist/css/bootstrap.min.css"/>">
    </head>
    <style>
        img{width:100%;}
        h5{text-align: center; color: #deb879; margin-bottom: 5px;}
        .phb_line1{ width: 30%; height: 0.1rem; margin: 0 auto; border-bottom: 2px solid #deb879; border-top: 1px solid #deb879;}
        .phb_line2{ width: 20%; height: 0.1rem; margin: 0 auto; border-bottom: 2px solid #deb879; border-top: 1px solid #deb879;}
        .banner{ height: 11.74rem; background-image: url(images/phb_background.png); background-repeat: no-repeat; background-size: 100%;}
        .phb_f1{text-align: center; padding-top: 0.15rem; color: #727171; line-height: 0.4rem;}
        .phb_f1 span{color: #e43030;}
    </style>
    <body>
        <div class="container-fluid "style="padding: 0;">
                <div class="row" style="margin: 0;">
                        <div class="col-xs-12" style="padding: 0;">
                            <img src="<c:url value="/images/phb_banner.png"/>" />
                        </div>
                </div>
          </div>
          <div class="banner">
            <div class="container-fluid" style="padding-top: 1rem;">
                    <div class="row" style="text-align: center; color: #818d4a;">
                            <div class="col-xs-12" >
                                <p>因为一座城，爱上一个人<br  />
                                圈城每周最美分享活动，<br  />
                                发现这个世界最美的角落，<br  />
                                让迷茫的人不再迷路。</p>
                            </div>
                    </div>
              </div>
              <div class="container-fluid" style="padding-top: 0.3rem;">
                    <div class="row">
                            <div class="col-xs-12" >
                                <h5>本期活动时间</h5>
                                <div class="phb_line1"></div>
                                <p class="phb_f1">${monday.substring(0,2) }月${monday.substring(3,5) }日－${sunday.substring(0,2) }月${sunday.substring(3,5) }日</p>
                            </div>
                    </div>
              </div>
              <div class="container-fluid" >
                    <div class="row">
                            <div class="col-xs-12" >
                                <h5>活动规则</h5>
                                <div class="phb_line2"></div>
                                <p style="padding-top: 0.15rem; color: #727171;">活动时间内发布分享生活，根据当周点赞数生成排行榜，${sunday.substring(0,2) }月${sunday.substring(3,5) }日24时会根据当周点赞数结算，前十名有丰厚奖励哦～</p>
                            </div>
                    </div>
              </div>
              <div class="container-fluid" >
                    <div class="row">
                            <div class="col-xs-12" >
                                <h5>活动奖励</h5>
                                <div class="phb_line2"></div>
                                <p class="phb_f1">前一名：<span>500</span>元现金<br />
                                    前二名：<span>200</span>元现金<br />
                                    前三名：<span>100</span>元现金<br />
                                    前四－十名：<span>50</span>元现金</p>
                                <p style="color: #727171;">圈圈提示：将你的分享生活转发给你的好友支持你会获得更多点赞哦～你的赞越多,越有可能上排行榜哦～</p>
                            </div>
                    </div>
              </div>
              <div class="container-fluid" style="margin-top:0.3rem;">
                    <div class="row">
                            <div class="col-xs-12" >
                                <h5>发布奖励时间</h5>
                                <div class="phb_line1"></div>
                                <p class="phb_f1">${monday3.substring(0,2) }月${monday3.substring(3,5) }日12时</p>
                            </div>
                    </div>
              </div>
          </div>
    </body>

    <script>
        
        //1.首次加载的时候，计算rem赋值给根元素里面的font-size。
        setRemSize();
        //2.当用户更改浏览器宽度自动获取屏幕宽度，再计算rem赋值给根元素里面的font-size
        window.addEventListener("resize",setRemSize,false);
        function setRemSize(){
            //获取rem值    rem =100 * (屏幕宽度 / 设计稿宽度) +"px";
            var _clientWidth=100*(document.documentElement.clientWidth / 576) + "px";
            //判断，是否屏幕宽度大于设计稿宽度
            if (document.documentElement.clientWidth >= 576) {
                //如果是，用设计稿的宽度作为rem的值赋给根元素的font-size
                document.documentElement.style.fontSize="100px";
            } else {
                //如果不是，将得到的rem值赋给根元素的font-size
                document.documentElement.style.fontSize=_clientWidth;
            }
        };

        
</script>
</html>